import React from 'react';
import { Card, Button, Space, Typography } from 'antd';
import { useThemeStore } from '../../stores/themeStore';

const { Title, Text } = Typography;

const ThemeTest: React.FC = () => {
  const { mode, toggleTheme } = useThemeStore();

  return (
    <div style={{ padding: '24px' }}>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Title level={2}>主题测试页面</Title>
        <Text>当前主题模式: {mode}</Text>
        
        <Button type="primary" onClick={toggleTheme}>
          切换主题
        </Button>
        
        <Card 
          title="默认卡片" 
          style={{ marginTop: '24px' }}
        >
          <p>这是一个测试Ant Design Card组件主题切换的卡片。</p>
          <p>在深色主题下，卡片背景应该是深色的，文字应该是浅色的。</p>
          <p>在浅色主题下，卡片背景应该是浅色的，文字应该是深色的。</p>
        </Card>
        
        <Card 
          title="带边框卡片" 
          bordered
          style={{ marginTop: '24px' }}
        >
          <p>这是一个带边框的测试卡片。</p>
          <p>边框颜色也应该根据主题自动切换。</p>
        </Card>
      </Space>
    </div>
  );
};

export default ThemeTest;